<template>
  <div>
    <el-form>
      <el-form-item label="上传封面图片">
        <div class="editor-after-div">
          <el-upload
            :class="{ hide: hideUpload }"
            ref="upload"
            action="#"
            accept="image/png,image/gif,image/jpg,image/jpeg"
            list-type="picture-card"
            :limit="1"
            :auto-upload="false"
            :before-upload="handleBeforeUpload"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :file-list="listarr"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <!-- <div class="logo_img">
          <i v-if="isHidden" class="el-icon-picture logo_img_title"></i>
          <img v-else :src="dialogImageUrl" width="100%" height="100%" />
        </div> -->
          <my-cropper
            ref="myCropper"
            @getFile="getFile"
            @upAgain="upAgain"
          ></my-cropper>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="small" @click="dialogFormSure"
          >确定</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addArticlePic } from "../api/article";
import MyCropper from "../components/cropper.vue";

export default {
  // 裁剪工具
  components: { MyCropper },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      isHidden: true,
      listarr: [],
      //上传一张图片后隐藏上传框
      hideUpload: false,
    };
  },
  methods: {
    deleteoic() {
      this.dialogImageUrl = "";
      this.isHidden = true;
      this.listarr = [];
    },
    handleBeforeUpload(file) {
      console.log("before");
      if (
        !(
          file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg"
        )
      ) {
        this.$notify.warning({
          title: "警告",
          message:
            "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
        });
      }
      let size = file.size / 1024 / 1024 / 2;
      if (size > 2) {
        this.$notify.warning({
          title: "警告",
          message: "图片大小必须小于2M",
        });
      }
    },
    handleChange(file, fileList) {
      this.hideUpload = true;
      this.dialogImageUrl = file.url;
      if (fileList.length > 0) {
        this.photoList = [fileList[fileList.length - 1]];
      }
      this.handleCrop(file);
    },
    //上传图片触发
    handleCrop(file) {
      this.$nextTick(() => {
        this.$refs.myCropper.open(file.raw || file, 350, 200, 7, 4);
      });
    },
    // 点击弹框重新时触发
    upAgain() {
      this.$refs["upload"].$refs["upload-inner"].handleClick();
    },
    // 获取裁剪后的图片
    getFile(file) {
      this.$nextTick(() => {
        this.$refs.myCropper.close();
      });
      var url = window.URL.createObjectURL(file);
      this.listarr.push({ name: file.name, url: url, file: file });
    },
    dialogFormSure() {
      if (this.listarr.length > 0) {
        const fileObj = this.listarr[0].file;
        var id = localStorage.getItem("imgId");
        if (id != null) {
          const form1 = new FormData();
          form1.append("imageFile", fileObj);
          form1.append("id", id);
          addArticlePic(form1).then(({ data }) => {
            console.log(data);
            if (data.code == 200) {
              this.$message.success(data.msg);
              localStorage.removeItem("imgId");
              this.$router.go(-1);
            } else {
              this.$message.error(data.msg);
            }
          });
        } else {
          this.$message.error("上传失败");
        }
      } else {
        this.$message.error("封面图不能为空");
      }
    },
    //上传
    handleRemove() {
      this.hideUpload = false;
      this.listarr = [];
    },
  },
};
</script>

<style scoped>
.el-form {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  width: 450px;
}

.editor-after-div >>> .el-upload {
  width: 400px;
  height: 250px;
  text-align: center;
  line-height: 250px;
}

.editor-after-div >>> .el-upload-list__item-thumbnail {
  width: 400px;
  height: 250px;
}
.editor-after-div >>> .el-upload-list__item {
  width: 400px;
  height: 250px;
}
</style>
<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>